<style>
.layui-input-block{
margin-left:120px;
}
</style>
<form class="layui-form" action="" id="orderEditForm">
  <div class="layui-form-item">
    <label class="layui-form-label" style="width:120px;">公司名称</label>
    <div class="layui-input-block">
          <div class="layui-form-mid layui-word-aux" th:text="${entity.companyName}"></div>
    </div>
  </div> 
  <input type="hidden" class="layui-input" th:value="${entity.id}" required name="id" lay-verify="required"/>
  <div class="layui-form-item" style="padding-top:20px">
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>物料编码</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<!-- 初始化物料审核信息 -->
	    <select name="materialCoding" style="width:240px;" lay-verify="required" required lay-ignore></select>
    	<input type="hidden" class="layui-input" name="materialId" th:value="${entity.materialId}" lay-verify="required"/> 
    </div>
    <label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>物料名称</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
	    <input type="text" class="layui-input" th:value="${entity.materialName}" required name="materialName" lay-verify="required"/>
    </div>
    <label class="layui-form-label col-sm-1" style="width:150px;">物料规格</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<input type="text" class="layui-input" th:value="${entity.materialSpec}" required name="materialSpec" lay-verify="required"/>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>物料类型</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<input type="text" class="layui-input" th:value="${entity.materialTypeName}" required name="materialTypeName" lay-verify="required"/>
    </div>
  	<label class="layui-form-label col-sm-1" style="width:150px;">计量单位</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<input type="text" class="layui-input" th:value="${entity.materialUnitName}" required name="materialUnitName" lay-verify="required"/>
    </div>
  </div>
   <!-- 分割线 -->
    <HR style="border:3 double #987cb9" width="80%" color=#987cb9 SIZE=3>
  <div class="layui-form-item">
  <label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>供应商名称</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
    	<select name="supplierId" lay-verify="required" lay-filter="supplierId" required >
	       <option th:each="s:${supplierList}" th:attr="value=${s.id}" th:text="${s.name}"
	       	 th:selected="${entity.supplierId}==${s.id}"></option>
	    </select>
    </div>
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>是否安规</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
      <input type="radio" name="isSafied" value="true"  title="是"  th:checked="${entity.isSafied} ==true">
      <input type="radio" name="isSafied" value="false" title="否"  th:checked="${entity.isSafied} ==false">
    </div>
  	<label class="layui-form-label col-sm-1" style="width:150px;"><font color='red' size="4">*</font>是否停用</label>
    <div class="layui-input-block col-sm-2" style="width:250px;padding-left:0px;margin-left:0px;">
      <input type="radio" name="isNoUsed" value="true"  title="是"  th:checked="${entity.isNoUsed} ==true">
      <input type="radio" name="isNoUsed" value="false" title="否"  th:checked="${entity.isNoUsed} ==false">
    </div>
  </div>
  
  <div class="layui-form-item">
	<label class="layui-form-label col-sm-2" style="width:150px;">证书生效日期</label>
    <div class="layui-input-block col-sm-2" style="width:250px; padding-left:0px;margin-left:0px;">
      <input type="text" id="safetyCertificateStart" th:value="${#dates.format(entity.safetyCertificateStart, 'yyyy-MM-dd')}"  class="layui-input" name='safetyCertificateStart'/>
    </div>
    <label class="layui-form-label col-sm-2" style="width:150px;">证书失效日期</label>
    <div class="layui-input-block col-sm-2" style="width:250px; padding-left:0px;margin-left:0px;">
      <input type="text" id="safetyCertificateEnd" th:value="${#dates.format(entity.safetyCertificateEnd, 'yyyy-MM-dd')}" class="layui-input" name="safetyCertificateEnd"/>
    </div>
  </div>
  
  <div class="layui-form-item">
    <label class="layui-form-label col-sm-1 " style="width:150px;" >备注</label>
    <div class="layui-input-block col-sm-2" style="width:80%;padding-left:0px;margin-left:0px;">
      <input type="text" class="layui-input" th:value="${entity.remark}"  name="remark" />
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
          <button class="layui-btn" lay-submit="" lay-filter="formSubmit" authcode='900234' >提交</button>
      	  <button type="button" class="layui-btn layui-btn-primary" id="closeBtn">关闭</button>
    </div>
  </div>

</form>
<script>
layui.use('form', function(){
		 $("[name='materialCoding']").select2({
			  placeholder:"请选择存货信息",//placeholder
			  language: 'zh-CN',//中文语言
			  //allowClear:true,//出现删除按钮图片，可以清除下拉选中内容
			  ajax: {
				    url: "/eng/material/info/data",
				    dataType: 'json',
				    delay: 350,
				    data: function (params) {
				      console.log(params.page)
				      return {
				        name: params.term, // search term
				        companyid:1,
				        page: params.page,
				        limit:30
				      };
				    },
				    processResults: function (data, params) {
				      params.page = params.page || 1;
				      return {
				        results: data.data,
				        pagination: {
				          more: (params.page * 30) < data.count
				        }
				      };
				    },
				    cache: true
				  },
				  escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
				  minimumInputLength: 0,//最小输入字符，输入最小字符后开始后台请求
				  templateResult: formatRepo, // 处理远程返回数据
				  templateSelection: formatRepoSelection // 设置下拉选中后显示内容
				});
		  
		  	function formatRepo (repo) {
		  		//下拉展示内容可以修改自定义样式
		      if (repo.loading) return repo.text;
		      var markup = "<div class=\"layui-row\" style='width:250px;'>" +
				      "<div class=\"layui-col-xs4 layui-col-sm4 layui-col-md3\">" +
				      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.materialCoding+"</div>" +
				     "</div>"+
				     "<div class=\"layui-col-xs8 layui-col-sm8 layui-col-md9\">" +
				      	"<div class=\"grid-demo grid-demo-bg1\">"+repo.materialName+"</div>" +
				     "</div>";

		      return markup;
		    }

		    function formatRepoSelection (repo) {
		      return repo.materialCoding;//选中返回select中的值
		    }
		  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
		  form.render();
		  //物料信息选择带回事件
		  $("[name='materialCoding']").on("select2:select",function(e){
			  //设置ID回去
			  $("input[name='materialId']").val(e.params.data.id);
			  //设置物料名称回去
			  $("input[name='materialName']").val(e.params.data.materialName);
			  //设置物料规格回去
			  $("input[name='materialSpec']").val(e.params.data.materialSpec);
			  //设置计量单位回去
			  $("input[name='materialUnitName']").val(e.params.data.measurementUName);
			  //设置物料类型回去
			  $("input[name='materialTypeName']").val(e.params.data.materialTypeName);
		  });
	  var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
	  form.render();
	  //监听提交
	  form.on('submit(formSubmit)', function(data){
	    $.ajax({
            type: "POST",
            url: "/eng/material/review/editReview",
            data: $("#orderEditForm").serializeJson(),
            dataType: "json",
            success: function(data){
            	if(data.code==200){
            	toastr.success(data.msg);
            	ins.reload({url:'/eng/material/info/page'})
            	//关闭弹出层
           	    layer.closeAll(editdialogindex);
           	    //更新表格数据
            	}else{
            		layer.msg(data.message);
            		//关闭
            	    layer.closeAll();
            	}
            }
           });
	  });
	  //关闭按钮
	  $("#closeBtn").click(function(){
		  layer.closeAll();
	  })
	});
	layui.use("laydate",function(){
		var laydate = layui.laydate;
		laydate.render({
			  elem: '#safetyCertificateStart'//指定元素
			});
		laydate.render({
			  elem: '#safetyCertificateEnd' //指定元素
			});
	});
</script>
